
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/updateCart.js"></script>
</head>

<body>

<div th:replace="~{common/top}"></div>
<div id="Content">

    <div id="BackLink">
        <a href="/catalog/main">Return to Main Menu</a>
    </div>

    <div id="Catalog">

        <div id="Cart">

            <h2>Shopping Cart</h2>

<!--            <form name="cartForm" th:action="@{/cart/main(cartItems=${cart.getCartItemList()})}" method="post">-->
                <table>
                    <tr>
                        <th><b>Item ID</b></th>
                        <th><b>Product ID</b></th>
                        <th><b>Description</b></th>
                        <th><b>Quantity</b></th>
                        <th><b>List Price</b></th>
                        <th><b>Total Cost</b></th>
                        <th>&nbsp;</th>
                    </tr>

                    <tr th:if="${cart.getActualNumberOfItems() == 0}">
                        <td colspan="8"><b>Your cart is empty.</b></td>
                    </tr>

                    <tr th:each="cartItem:${cart.getCartItemList()}" th:id="${cartItem.item.itemId}">
                        <td>
                            <a th:href="@{/catalog/item(itemId=${cartItem.item.itemId})}" th:text="${cartItem.item.itemId}">
                            </a>
                        </td>
                        <td th:text="${cartItem.productId}">
                        </td>
                        <td th:text=" ${cartItem.item.attribute1}?:''+' '+${cartItem.item.attribute2}+' '+
                                    ${cartItem.item.attribute3}+' '+ ${cartItem.item.attribute4}+' '+
                                    ${cartItem.item.attribute5}+' '+ ${cartItem.item.product.name}">
                        <td>
                            <input type="text" th:id="${cartItem.item.itemId}" th:name="${cartItem.item.itemId}" th:value="${cartItem.quantity}" onblur="updateCart(this.id,this.value)">
                            <font color="red" id="quantityMsg"></font>
                        </td>
                        <td th:text="'$'+${#numbers.formatDecimal(cartItem.item.listPrice, 1,2)}">

                        </td>
                        <td th:id="${cartItem.item.itemId}+'Total'" th:text="'$'+${#numbers.formatDecimal(cartItem.total, 1,2)}">

                        </td>
                        <td>
                            <a class="Button" th:href="@{/cart/remove(itemId=${cartItem.item.itemId})}">
                                Remove
                            </a>
                        </td>
                    </tr>

                    <tr>
                        <td colspan="7">Sub Total:
                            <label id="total" th:text="'$'+${#numbers.formatDecimal(cart.getSubTotal(), 1,2)}">
                            </label>

                            <!--<input type="submit" value="Update Cart">-->
                        </td>
                    </tr>
                </table>
<!--            </form>-->

            <a th:if="${cart.getActualNumberOfItems()} gt '0'" class="Button" href="/order/newOrderView">Proceed to Checkout</a>
        </div>

        <div id="Separator">&nbsp;</div>
    </div>

</div>
<div th:replace="~{common/bottom}"></div>

</body>

</html>
